<template>
  <common-card class="comprehensive-comparison">
    <template #title>班级综合对比</template>
    <!-- <template #operate
      ><span class="operate"
        ><label class="operate__icon"></label
        ><span class="operate__desc">导出</span></span
      ></template
    > -->
    <div>
      <div
        v-show="dataList?.length && dataList?.length > 0"
        class="chart"
        ref="chartRef"
        style="width: 100%; height: 466px"
      ></div>
      <NoData v-if="dataList?.length === 0"></NoData>
      <div class="table">
        <a-table
          :showSorterTooltip="false"
          :columns="COMPARISON_COLUMN"
          :dataSource="dataList"
          :pagination="false"
          :scroll="{ y: 300 }"
        >
          <template v-slot:bodyCell="{ column, record }">
            <!-- <template v-if="column.dataIndex === 'class_name'">
              <span class="skip-text" @click="goClassSituation(record)">{{
                record.class_name
              }}</span>
            </template> -->
            <template v-if="column.dataIndex === 'commit_rate'">
              {{ getPercent(record.commit_rate) }}%</template
            >
            <template v-if="column.dataIndex === 'right_rate'">
              {{ getPercent(record.right_rate) }}%</template
            >
            <template v-if="column.dataIndex === 'mean_question_count'">
              {{ parseFloat(record.mean_question_count.toFixed(1)) }}
            </template>
            <template v-if="column.dataIndex === 'mean_time'"
              ><template v-if="getTime(record.mean_time)[0] > 0"
                >{{ getTime(record.mean_time)[0] }}小时</template
              >
              {{ getTime(record.mean_time)[1] }}分钟
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { COMPARISON_COLUMN } from '../constant'
import { ref, watchEffect, computed } from 'vue'
import useCharts from '@/utils/echart/index'
import { getGradeComparison } from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import NoData from '@/components/homework-systom/NoData.vue'
import { getPercent, getTime } from '../utils'
import $bus from '@/utils/tools/bus'
const situationReport = useSituationReport()
const dataList = ref()

const getOption = () => {
  const option = {
    legend: {
      itemGap: 22,
      right: 0
    },
    tooltip: {
      trigger: 'axis',
      padding: [12, 16],
      borderRadius: 8,
      axisPointer: {
        type: 'shadow',
        label: {
          fontSize: 14,
          shadowColor: 'rgba(139, 200, 254, 0.15)'
        }
      },
      formatter: params => {
        let res = `<span style="font-weight: 700;">${params[0].axisValueLabel}</span><br>`
        params.forEach(item => {
          res += `<span style="display: flex; align-items: center;gap: 28px; padding-top: 16px;">
            <span style="width: 72px; display: inline-flex; align-items: center; gap: 4px">
              <span style="display: inline-block; width: 12px; height: 12px; border-radius: 200px; background: ${
                item.color
              };"></span>
            <span style="color: rgba(4, 11, 26, 0.75);">${
              item.seriesName
            }</span>
          </span>
          <span style="color: rgba(4, 11, 26, 0.5)">${item.data}${
            item.seriesName === '正确率' ? '%' : ''
          }</span>
         </span>`
        })
        return res
      }
    },
    grid: {
      left: '40',
      right: '50',
      bottom: '18%',
      top: '12%'
    },
    color: ['#8BC8FF'],
    xAxis: {
      type: 'category',
      data: dataList.value?.map(item => item.class_name)
    },
    dataZoom: {
      startValue: 0,
      endValue: 6,
      // 滑动块最小值，百分比0-100
      minSpan: dataList.value?.length
        ? dataList.value.length < 7
          ? 100
          : parseFloat(((6 / dataList.value.length) * 100).toFixed(1))
        : 1,
      type: 'slider',
      filterMode: 'none',
      showDetail: false
    },
    yAxis: [
      {
        type: 'value',
        name: '正确率',
        splitNumber: 5,
        max: 100,
        nameTextStyle: {
          align: 'right'
        },
        axisLabel: {
          formatter: `{value}%`
        }
      },
      {
        type: 'value',
        name: '人均题数',
        splitNumber: 5,
        interval: getMax.value / 5,
        max: getMax.value,
        nameTextStyle: {
          align: 'left'
        }
      }
    ],
    series: [
      {
        data: dataList.value?.map(item => getPercent(item.right_rate)) || [],
        name: '正确率',
        itemStyle: {
          color: '#FFD879'
        },
        label: {
          show: true,
          position: 'top',
          color: '#000',
          formatter: `{c}%`
        },
        symbol: 'circle',
        symbolSize: 14,
        type: 'line',
        yAxisIndex: 0
      },
      {
        data:
          dataList.value?.map(item =>
            parseFloat((item.mean_question_count || 0).toFixed(1))
          ) || [],
        name: '人均题数',
        type: 'bar',
        barMaxWidth: 60,
        itemStyle: {
          borderRadius: [8, 8, 0, 0]
        },
        yAxisIndex: 1
      }
    ]
  }
  return option
}
const chartRef = ref(null)
const { setOption } = useCharts(chartRef, true, true, 'light')

const getMax = computed(() => {
  const max =
    dataList.value && dataList.value?.length > 0
      ? Math.max(...dataList.value.map(item => item.mean_question_count))
      : 0
  const flag = Math.ceil(max / 5)
  if (max === 1) return 5
  else return flag * 5
})

const getData = async () => {
  const { data } = await getGradeComparison(situationReport.search)
  dataList.value = data?.list || []
}

const goClassSituation = item => {
  $bus.emit('change-tab', {
    active: 'class',
    to: 'resultTrends',
    classId: item.class_id
  })
}

watchEffect(async () => {
  if (
    situationReport.search.class_id ||
    situationReport.search.grade_id ||
    situationReport.search.subject_id
  ) {
    await getData()
    setOption(getOption())
  }
})
</script>
<style lang="less" scoped>
@import '../style.less';

.comprehensive-comparison {
  .operate {
    &__icon {
      background: url('@/assets/images/situation-report/export.png') no-repeat
        center/cover;
      margin-right: 8px;
    }
  }

  .table {
    margin-top: @gap;
  }

  .skip-text {
    color: #4d88ff;
    cursor: pointer;
  }
}
</style>
